<!DOCTYPE html>
<html lang="zh_CN">
<meta charset="utf-8">
<head>
    <#include "/common/base_include.ftl"/>
</head>
<body>
<div class="wrapper wrapper-content ">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="fixed-table-toolbar">
                <div class="columns pull-right">
                    <button class="btn btn-success" onclick="reLoad()">查询</button>
                </div>
                <div class="columns pull-right col-md-2 nopadding">
                    <input id="searchName" type="text" class="form-control" placeholder="角色名">
                </div>
            </div>
            <div id="toolbar" class="btn-group">
                <@shiro.hasPermission name="sys:role:add">
                    <button type="button"  class="btn  btn-primary btn-group-xs add_btn" data-url="/sys/role/modify">
                        <i class="fa fa-plus hidden" aria-hidden="true" ></i>添加
                    </button>
                </@shiro.hasPermission>
                <@shiro.hasPermission name="sys:role:edit">
                    <button type="button" class="btn  btn-info btn-group btn-group-xs edit_btn" data-url="/sys/role/modify">
                        <i class="fa fa-plus hidden" aria-hidden="true"></i>修改
                    </button>
                </@shiro.hasPermission>
                <@shiro.hasPermission name="sys:role:remove">
                    <button type="button"
                            class="btn  btn-warning   btn-group btn-group-xs remove_btn" data-url="/sys/role/remove">
                        <i class="fa fa-trash hidden" aria-hidden="true"></i>删除
                    </button>
                </@shiro.hasPermission>
        </div>
            <table id="exampleTable" data-mobile-responsive="true">  </table>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        var columns = [
            {radio: true},
            {
                field: 'roleId', // 列字段名
                title: '序号' // 列标题
            },
            {
                field: 'roleName',
                title: '角色名'
            } ,{
                field: 'roleSign',
                title: '角色标识'
            },
            {
                field: 'remark',
                title: '备注'
            },
            {
                field: '',
                title: '权限',
                align:'center',
                 formatter: function (value, row, index) {
                    var f =  '<a class="btn btn-success btn-sm " href="#" title="权限分配"  mce_href="#" onclick="grantPermissions(\''
                        + row.key
                        + '\')"><i class="fa fa-key"></i></a>' ;
                    return f;
                }
            }]
        var param = function (params) {
            return {
                limit: params.limit,
                offset: params.offset,
                roleName: $('#searchName').val(),
            }
        };
        loadTable("/sys/role/list", columns, param,'roleId');
    });
    var permission_div;
function grantPermissions(roleId){
   permission_div= layer.open({
        type: 1,
        title: '权限分配',
        maxmin: true,
        shadeClose: false, // 点击遮罩关闭层
        area: ['500px', '500px'],
        content: $('#permissions'),
       btn: ['提交', '关闭'],
       yes:function (index,layerno) {
           savePermissions(roleId);
       }
    });
     $("#permissions").empty();
    $("#permissions").append('<div id="menuTree"></div>');
    getTreeData('menuTree',"/sys/menu/tree/" + roleId,true,[ "wholerow", "checkbox" ]);
}
function savePermissions(roleId){
var menuIds=[];
    var ref = $('#menuTree').jstree(true); // 获得整个树
        menuIds = ref.get_selected(); // 获得所有选中节点的，返回值为数组
        $("#menuTree").find(".jstree-undetermined").each(function(i, element) {
            menuIds.push($(element).closest('.jstree-node').attr("id"));
        });
        console.log(menuIds);
    postAjax("/sys/role/grantPermissions",{roleId:roleId,menuIds:menuIds},function(data){
          layer.msg(data.msg);
          layer.close(permission_div);
    });
}
</script>
</body>
<div id="permissions" style="display:none;">
</div>
</html>